<template>
  <div>
    <div class="space-title">
      <div class="space-title-item"></div>
      <div class="space-title-item">
        <button>课件</button>
      </div>
      <div class="space-title-item">
        <button class="normal">相册</button>
      </div>
      <div class="space-title-item" style="vertical-align: middle;text-align: right;">
        <img src="img/icon/ic_play_blue.png" style="width: 20px;height: 20px;">
      </div>
    </div>
    <div class="space-content">
      <img src="img/14.png" ng-click="toAlbum()">
      <img src="img/14.png" ng-click="toAlbum()">
      <img src="img/14.png" ng-click="toAlbum()">
      <img src="img/14.png" ng-click="toAlbum()">
      <img src="img/14.png" ng-click="toAlbum()">
      <img src="img/14.png" ng-click="toAlbum()">
      <img src="img/14.png" ng-click="toAlbum()">
      <img src="img/14.png" ng-click="toAlbum()">
      <img src="img/14.png" ng-click="toAlbum()">
      <img src="img/14.png" ng-click="toAlbum()">
      <img src="img/14.png" ng-click="toAlbum()">
      <img src="img/14.png" ng-click="toAlbum()">
      <img src="img/14.png" ng-click="toAlbum()">
    </div>
    <div class="course-bottom-operation" style="padding: 0">
      <div class="course-bottom-operation-item-md4">
        <img src="img/icon/ic_replay.png">做复盘
      </div>
      <div class="course-bottom-operation-item-md4">
        <img src="img/icon/ic_improve.png">来改善
      </div>
      <div class="course-bottom-operation-item-md4">
        <img src="img/icon/ic_question.png">提问
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "CourseSpace"
    }
</script>

<style lang="scss" scoped>

  .space-title{
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: #FFFFFF;
  }
  .space-title .space-title-item{
    width: 25%;
    height: 90px;
    line-height: 90px;
    text-align: center;
    float: left;
    padding: 0 15px;
  }
  .space-title .space-title-item button{
    width: 100%;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    font-weight: bolder;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 19px;
    text-align: center;
    margin-top: 28px;
  }
  .space-title .space-title-item button.normal{
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    font-weight: bolder;
    text-align: center;
    color: #ffffff;
    background-color: #006ab5;
    border: 1px solid #eeeeee;
    border-radius: 19px;
    text-align: center;
  }
  .space-content{
    padding: 0 22px 50px 22px;
    background-color: #FFFFFF;
    overflow: auto;
    position: absolute;
    top: 90px;
    bottom: 50px;
  }
  .space-content img{
    width: calc(100%/3 - 10px);
    margin-left: 10px;
    float: left;
  }
  .space-content img:nth-child(0){
    margin-left: 0;
  }
</style>
